
  var resizeWorldMapContainer = function (worldMapContainer) {
		  console.log(window.innerWidth)
		  if ( window.innerWidth <= 500){
			  worldMapContainer.style.width=window.innerWidth+'px';
		  }else{
			  worldMapContainer.style.width=(window.innerWidth/2)-20+'px';

		  }
		};
		
layui.use(['form','layer','laydate','table','laytpl'],function(){
	
	
	const userVue=new Vue({
			el: '#userGrade',
			data:{
				  all_data:null,
				  mapcharts:null
			},
			methods:{
				getAllRole:function(){
					this.$http.post(global_url+'/admin/rolePermissions')
						.then(
						response=>{
							this.all_data=response.body.datas;
							table.render({
								elem: '#userGrade',
								cellMinWidth : 95,
								cols : [[
									{field:"id", title: 'ID', width: 60, fixed:"left",sort:"true", align:'center', edit: 'text'},
									{field: 'name', title: '角色名称', edit: 'text', align:'center'},
									{field: 'url', title: '可访问资源',width: 280, sort:"true", align:'center',templet:function(p){
									  var html='';
									   for ( var i = 0; i <p.permissions.length; i++){
											html+=p.permissions[i].name+'('+p.permissions[i].url+')'+'；'
										}
										return html.substring(0,html.length-1)
									}},
									{field: 'permissions', title: '资源数', sort:"true",minWidth:20, width: 100,align:'center',templet:function(p){
									
										return p.permissions.length
									}},
									{title: '操作', minWidth:170, templet:'#userListBar',fixed:"right",align:"center"}
								]],
								data:this.all_data,
																					
							});
							
							var chartVue=new Vue({
								el: '#chart',
								data:{
									all_data:this.all_data
								},
							});
							
							
							 initChart();
						},					
						response=>{
							layer.msg(response.body.status)
						})
					
				}
			}
			
		});
	
	userVue.getAllRole();
	
	
	
	
	function initChart(){
		var chart_data=userVue.all_data;
		userVue.mapcharts=new Array()
		for ( var i = 0; i <chart_data.length; i++){
			var mychartdoc=document.getElementById(chart_data[i].name);
			userVue.mapcharts[i]=mychartdoc
			resizeWorldMapContainer(mychartdoc);
			var myChart =echarts.init(mychartdoc);
			
			
			var rootdata= {
						  name: chart_data[i].name,
						  symbolSize: 150,
						  itemStyle: {
							  normal: {
								  color: 'red'
							  }
						  }
					 
					 }
			
			
			var $permissions=chart_data[i].permissions;
			
			var chart_datas=[$permissions.length+1];
			var links_datas=[$permissions.length];
			
			chart_datas[0]=rootdata;
			for(var j=0;j < $permissions.length;j++){
				var $p=$permissions[j];
				pdata= {
					  name: $p.url,
					  des: $p.name,
					  symbolSize: 80,
					  itemStyle: {
						  normal: {
							  color: 'green'
						  }
					  }
				  }
				  linkData= {
						  source: chart_data[i].name,
						  target:  $p.url,
						  name:  $p.descritpion,
				}
				chart_datas[j+1]=pdata;  
				links_datas[j]=linkData;
			}
			
			
			
			
			 option ={
				  baseOption:{
					  title:{
						  text:chart_data[i].name,
					  },
					  series: [
								  {
									  type: 'graph',
									  layout: 'force',
									  symbolSize: 40,
									  roam: false,
									  edgeSymbol: ['circle', 'arrow'],
									  edgeSymbolSize: [4, 10],
									  edgeLabel: {
										  normal: {
											  textStyle: {
												  fontSize: 30
											  }
										  }
									  },
									  force: {
										  repulsion: 500,
										  edgeLength: [120, 180],
									  },
									  draggable: true,
									  itemStyle: {
										  normal: {
											  color: '#4b565b'
										  }
									  },
									  lineStyle: {
										  normal: {
											  width: 2,
											  color: '#4b565b'
				  
										  }
									  },
									  edgeLabel: {
										  normal: {
											  show: true,
											  formatter: function (x) {
												  return x.data.name;
											  }
										  }
									  },
									  label: {
										  normal: {
											  show: true,
											  textStyle: {
											  }
										  }
									  },
									  data: chart_datas,
									  links:links_datas
								  }
							]
				  },
				  
				  media:[
					  {
						  // 这里写规则。
						   query: {
							   maxWidth:500,
						   },   
							option: {       // 这里写此规则满足下的option。
								
								 title:{
									show:true,
									text:chart_data[i].name,
								},
								series:[
									 {
										
										force: {
											repulsion: 300,
											edgeLength: [80, 100],
											gravity:0.3
										},
									}
								]
							}	
					  }
				
				  ]
			  }			
			myChart.setOption(option);
			myChart.resize();
		}
		window.onresize = function () {
			//重置容器高宽
			userVue.mapcharts.forEach(function(value,i){
				resizeWorldMapContainer(value)
				userVue.mapcharts[i].resize()
			})
		};

	}

	
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laydate = layui.laydate,
        laytpl = layui.laytpl,
        table = layui.table;

	const roleVue=new Vue({
			el: '#userGrade',
			data:{
				  permissions:null,
				  tableIns:null
			},
			methods:{
				//添加复选框
				addPermissions:function(data){
					var newHtml=''
					for(var i=0;i<this.permissions.length;i++){
						var html='<input type="checkbox" name='+this.permissions[i].name+' lay-skin="primary" title='+this.permissions[i].url+'('+this.permissions[i].descritpion+')>'
						
						if(data!=null){
							data.forEach(function(value,j){
								 if(roleVue.permissions[i].name==value){
									 html='<input type="checkbox" name='+roleVue.permissions[i].name+' lay-skin="primary"  checked  title='+roleVue.permissions[i].url+'('+roleVue.permissions[i].descritpion+')  >'
								 }
							})
						}
						newHtml+=html
					}
					return newHtml;
				},
				delete:function (data) {
                this.$http.post(global_url+'/admin/deleteRole',data)
                    .then(
                        response=>{

                             layer.msg(response.body.datas);
                            this.getAllPerm();

                        },
                        response=>{
                            layer.msg(response.body.datas);
                        }
                    )
            }
				
			}
		});
    //添加验证规则
    form.verify({
        oldPwd : function(value, item){
            if(value != "123456"){
                return "密码错误，请重新输入！";
            }
        },
        newPwd : function(value, item){
            if(value.length < 6){
                return "密码长度不能小于6位";
            }
        },
        confirmPwd : function(value, item){
            if(!new RegExp($("#oldPwd").val()).test(value)){
                return "两次输入密码不一致，请重新输入！";
            }
        }
    })

    //用户等级
//     table.render({
//         elem: '#userGrade',
//         url : '../../json/userGrade.json',
//         cellMinWidth : 95,
//         cols : [[
//             {field:"id", title: 'ID', width: 60, fixed:"left",sort:"true", align:'center', edit: 'text'},
//             {field: 'gradeIcon', title: '图标展示', templet:'#gradeIcon', align:'center'},
//             {field: 'gradeName', title: '等级名称', edit: 'text', align:'center'},
//             {field: 'gradeValue', title: '等级值', edit: 'text',sort:"true", align:'center'},
//             {field: 'gradeGold', title: '默认金币', edit: 'text',sort:"true", align:'center'},
//             {field: 'gradePoint', title: '默认积分', edit: 'text',sort:"true", align:'center'},
//             {title: '当前状态',minWidth:100, templet:'#gradeBar',fixed:"right",align:"center"}
//         ]]
//     });


		
		
		//列表操作
		table.on('tool(userGrade)', function(obj){
				var layEvent = obj.event,
				data = obj.data;
				if(layEvent=="delete"){
						roleVue.delete(data)
				}else{
					Vue.http.post(global_url+'/admin/permission/').then(
						response=>{
							
							var  permissions=response.body.datas;
							
							
							var index = layui.layer.open({
											title : "修改角色",
											type : 2,
											content : "userAddGrade.html",
											success : function(layero, index){
													var body = layui.layer.getChildFrame('body', index);
													if(permissions){
														roleVue.permissions=permissions;
														var names=[]
														for(var p=0;p<data.permissions.length;p++){
															 names[p]=data.permissions[p].name
														}
														var newHtml=roleVue.addPermissions(names);
														// var newHtml ='<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">';
														body.find(".id").val(data.id);  
														body.find(".roleName").val(data.name);  
														body.find(".pcheckbox").append(newHtml);
												
													
														form.render(null,"test1");
													}
											
													setTimeout(function(){
															layui.layer.tips('点击此处返回权限管理', '.layui-layer-setwin .layui-layer-close', {
																	tips: 3
															});
													},500)
											}
									})
							layui.layer.full(index);
							window.sessionStorage.setItem("index",index);
							$(window).on("resize",function(){
									layui.layer.full(window.sessionStorage.getItem("index"));
							})
							
						},					
						response=>{
							layer.msg(response.body.status)
						})
				
				}
				
		});

    form.on('switch(gradeStatus)', function(data){
        var tipText = '确定禁用当前会员等级？';
        if(data.elem.checked){
            tipText = '确定启用当前会员等级？'
        }
        layer.confirm(tipText,{
            icon: 3,
            title:'系统提示',
            cancel : function(index){
                data.elem.checked = !data.elem.checked;
                form.render();
                layer.close(index);
            }
        },function(index){
            layer.close(index);
        },function(index){
            data.elem.checked = !data.elem.checked;
            form.render();
            layer.close(index);
        });
    });
		
		
    //新增等级
	$(".addGrade").click(function(){
		Vue.http.post(global_url+'/admin/permission/').then(
				response=>{
					
					var  permissions=response.body.datas;
					
					
					var index = layui.layer.open({
									title : "添加用户",
									type : 2,
									content : "userAddGrade.html",
									success : function(layero, index){
											var body = layui.layer.getChildFrame('body', index);
											if(permissions){
												roleVue.permissions=permissions;
												var newHtml=roleVue.addPermissions();
												// var newHtml ='<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">';
												
												body.find(".roleName").val("ROLE_");  
												body.find(".pcheckbox").append(newHtml);
												form.render(null,"test1");
				
											}
									
											setTimeout(function(){
													layui.layer.tips('点击此处返回权限管理', '.layui-layer-setwin .layui-layer-close', {
															tips: 3
													});
											},500)
									}
							})
					layui.layer.full(index);
					window.sessionStorage.setItem("index",index);
					$(window).on("resize",function(){
							layui.layer.full(window.sessionStorage.getItem("index"));
					})
					
				},					
				response=>{
					layer.msg(response.body.status)
				})
		
	})
	
	
	
	
	
	//新增url
	$(".addUrl").click(function(){
			
			var index = layui.layer.open({
							title : "添加权限",
							type : 2,
							content : "userAddUrl.html",
							success : function(layero, index){
									var body = layui.layer.getChildFrame('body', index);
									
							
									setTimeout(function(){
											layui.layer.tips('点击此处返回权限管理', '.layui-layer-setwin .layui-layer-close', {
													tips: 3
											});
									},500)
							}
					})
			layui.layer.full(index);
			window.sessionStorage.setItem("index",index);
			$(window).on("resize",function(){
					layui.layer.full(window.sessionStorage.getItem("index"));
			})
		
	})
	
	
	

//     $(".addGrade").click(function(){
// 		
// 			
// 			var index = layui.layer.open({
// 							title : "添加用户",
// 							type : 2,
// 							content : "userAddGrade.html",
// 							success : function(layero, index){
// 									var body = layui.layer.getChildFrame('body', index);
// 									var newHtml ='<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">';
// 									body.find(".pcheckbox").append(newHtml);
// 									form.render(null,"test1");
// 							
// 									setTimeout(function(){
// 											layui.layer.tips('点击此处返回权限管理', '.layui-layer-setwin .layui-layer-close', {
// 													tips: 3
// 											});
// 									},500)
// 							}
// 					})
// 			layui.layer.full(index);
// 			window.sessionStorage.setItem("index",index);
// 			$(window).on("resize",function(){
// 					layui.layer.full(window.sessionStorage.getItem("index"));
// 			})
// 			
// 		// roleVue.getpermission();
// // 		var index = layui.layer.open({
// // 				title : "添加用户",
// // 				type : 2,
// // 				content : "userAddGrade.html",
// // 				success : function(layero, index){
// // 						var body = layui.layer.getChildFrame('body', index);
// // 						roleVue.getpermission(body);
// // 				
// // 						setTimeout(function(){
// // 								layui.layer.tips('点击此处返回权限管理', '.layui-layer-setwin .layui-layer-close', {
// // 										tips: 3
// // 								});
// // 						},500)
// // 				}
// // 		})
// // 		layui.layer.full(index);
// // 		window.sessionStorage.setItem("index",index);
// // 		//改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
// // 		$(window).on("resize",function(){
// // 				layui.layer.full(window.sessionStorage.getItem("index"));
// // 		})
// //         var $tr = $(".layui-table-body.layui-table-main tbody tr:last");
// //         if($tr.data("index") < 9) {
// //             var newHtml = '<tr data-index="' + ($tr.data("index") + 1) + '">' +
// //                 '<td data-field="id" data-edit="text" align="center"><div class="layui-table-cell laytable-cell-1-id">' + ($tr.data("index") + 2) + '</div></td>' +
// //                 '<td data-field="gradeIcon" align="center" data-content="icon-vip' + ($tr.data("index") + 2) + '"><div class="layui-table-cell laytable-cell-1-gradeIcon"><span class="seraph vip' + ($tr.data("index") + 2) + ' icon-vip' + ($tr.data("index") + 2) + '"></span></div></td>' +
// //                 '<td data-field="gradeName" data-edit="text" align="center"><div class="layui-table-cell laytable-cell-1-gradeName">请输入等级名称</div></td>' +
// //                 '<td data-field="gradeValue" data-edit="text" align="center"><div class="layui-table-cell laytable-cell-1-gradeValue">0</div></td>' +
// //                 '<td data-field="gradeGold" data-edit="text" align="center"><div class="layui-table-cell laytable-cell-1-gradeGold">0</div></td>' +
// //                 '<td data-field="gradePoint" data-edit="text" align="center"><div class="layui-table-cell laytable-cell-1-gradePoint">0</div></td>' +
// //                 '<td data-field="' + ($tr.data("index") + 1) + '" align="center" data-content="" data-minwidth="100"><div class="layui-table-cell laytable-cell-1-' + ($tr.data("index") + 1) + '"> <input type="checkbox" name="gradeStatus" lay-filter="gradeStatus" lay-skin="switch" lay-text="启用|禁用" checked=""><div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>启用</em><i></i></div></div></td>' +
// //                 '</tr>';
// //             $(".layui-table-body.layui-table-main tbody").append(newHtml);
// //             $(".layui-table-fixed.layui-table-fixed-l tbody").append('<tr data-index="' + ($tr.data("index") + 1) + '"><td data-field="id" data-edit="text" align="center"><div class="layui-table-cell laytable-cell-1-id">' + ($tr.data("index") + 2) +'</div></td></tr>');
// //             $(".layui-table-fixed.layui-table-fixed-r tbody").append('<tr data-index="' + ($tr.data("index") + 1) + '"><td data-field="' + ($tr.data("index") + 1) + '" align="center" data-content="" data-minwidth="100"><div class="layui-table-cell laytable-cell-1-' + ($tr.data("index") + 1) + '"> <input type="checkbox" name="gradeStatus" lay-filter="gradeStatus" lay-skin="switch" lay-text="启用|禁用" checked=""><div class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch"><em>启用</em><i></i></div></div></td></tr>');
// //             form.render();
// //         }else{
// //             layer.alert("模版中由于图标数量的原因，只支持到vip10，实际开发中可根据实际情况修改。当然也不要忘记增加对应等级的颜色。",{maxWidth:300});
// //         }
//     });
// 
    //控制表格编辑时文本的位置【跟随渲染时的位置】
    $("body").on("click",".layui-table-body.layui-table-main tbody tr td",function(){
        $(this).find(".layui-table-edit").addClass("layui-"+$(this).attr("align"));
    });

})